<template>
  <div class="glsl-examples">
    <h2>GLSL示例代码集合</h2>
    
    <!-- 示例选择器 -->
    <div class="example-selector">
      <button 
        v-for="example in examples" 
        :key="example.id"
        @click="selectExample(example.id)"
        :class="{ active: selectedExample === example.id }"
      >
        {{ example.name }}
      </button>
    </div>

    <!-- 当前示例显示 -->
    <div v-if="currentExample" class="example-content">
      <h3>{{ currentExample.name }}</h3>
      <p class="description">{{ currentExample.description }}</p>
      
      <div class="code-section">
        <h4>GLSL代码：</h4>
        <pre><code>{{ currentExample.glslCode }}</code></pre>
      </div>
      
      <div class="code-section">
        <h4>JavaScript代码：</h4>
        <pre><code>{{ currentExample.jsCode }}</code></pre>
      </div>
      
      <div class="parameters" v-if="currentExample.parameters">
        <h4>可调参数：</h4>
        <div v-for="param in currentExample.parameters" :key="param.name" class="param-item">
          <label>{{ param.name }}: {{ param.value }}</label>
          <input 
            type="range" 
            :min="param.min" 
            :max="param.max" 
            :step="param.step"
            :value="param.value"
            @input="updateParameter(param.name, $event.target.value)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const selectedExample = ref('basic-color')

// GLSL示例数据
const examples = ref([
  {
    id: 'basic-color',
    name: '基础颜色',
    description: '最简单的着色器，设置固定颜色',
    glslCode: `void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  // 设置纯红色
  material.diffuse = vec3(1.0, 0.0, 0.0);
}`,
    jsCode: `const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  fragmentShaderText: \`
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      material.diffuse = vec3(1.0, 0.0, 0.0);
    }
  \`
});
tileset.customShader = customShader;`
  },
  {
    id: 'height-color',
    name: '高度颜色',
    description: '根据建筑物高度改变颜色',
    glslCode: `void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  float height = fsInput.attributes.positionMC.z;
  
  // 高度越高，红色越深
  float red = clamp(height / 100.0, 0.0, 1.0);
  material.diffuse = vec3(red, 0.0, 0.0);
}`,
    jsCode: `const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  fragmentShaderText: \`
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      float height = fsInput.attributes.positionMC.z;
      float red = clamp(height / 100.0, 0.0, 1.0);
      material.diffuse = vec3(red, 0.0, 0.0);
    }
  \`
});
tileset.customShader = customShader;`
  },
  {
    id: 'time-animation',
    name: '时间动画',
    description: '基于时间的颜色变化动画',
    glslCode: `void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  // 基于时间的颜色变化 (每60帧循环)
  float time = fract(czm_frameNumber / 60.0);
  
  // 从红色渐变到蓝色
  material.diffuse = vec3(time, 0.0, 1.0 - time);
}`,
    jsCode: `const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  fragmentShaderText: \`
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      float time = fract(czm_frameNumber / 60.0);
      material.diffuse = vec3(time, 0.0, 1.0 - time);
    }
  \`
});
tileset.customShader = customShader;`
  },
  {
    id: 'scan-line',
    name: '扫描线效果',
    description: '移动的扫描线高亮效果',
    glslCode: `void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  float height = fsInput.attributes.positionMC.z;
  float scanLine = fract(czm_frameNumber / 120.0) * 200.0;  // 扫描线位置
  
  // 在扫描线附近高亮
  float distance = abs(height - scanLine);
  if (distance < 10.0) {
    material.diffuse = vec3(1.0, 1.0, 0.0);  // 黄色高亮
  } else {
    material.diffuse = vec3(0.5, 0.5, 0.5);  // 灰色
  }
}`,
    jsCode: `const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  fragmentShaderText: \`
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      float height = fsInput.attributes.positionMC.z;
      float scanLine = fract(czm_frameNumber / 120.0) * 200.0;
      float distance = abs(height - scanLine);
      if (distance < 10.0) {
        material.diffuse = vec3(1.0, 1.0, 0.0);
      } else {
        material.diffuse = vec3(0.5, 0.5, 0.5);
      }
    }
  \`
});
tileset.customShader = customShader;`
  },
  {
    id: 'data-visualization',
    name: '数据可视化',
    description: '根据数据值显示不同颜色（模拟污染数据）',
    glslCode: `void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  // 模拟污染数据 (0-1之间)
  float pollution = sin(fsInput.attributes.positionMC.x * 0.01) * 0.5 + 0.5;
  
  if (pollution > 0.8) {
    material.diffuse = vec3(1.0, 0.0, 0.0);  // 红色 - 高污染
  } else if (pollution > 0.5) {
    material.diffuse = vec3(1.0, 1.0, 0.0);  // 黄色 - 中污染
  } else {
    material.diffuse = vec3(0.0, 1.0, 0.0);  // 绿色 - 低污染
  }
}`,
    jsCode: `const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  fragmentShaderText: \`
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      float pollution = sin(fsInput.attributes.positionMC.x * 0.01) * 0.5 + 0.5;
      if (pollution > 0.8) {
        material.diffuse = vec3(1.0, 0.0, 0.0);
      } else if (pollution > 0.5) {
        material.diffuse = vec3(1.0, 1.0, 0.0);
      } else {
        material.diffuse = vec3(0.0, 1.0, 0.0);
      }
    }
  \`
});
tileset.customShader = customShader;`
  },
  {
    id: 'pulse-effect',
    name: '脉冲效果',
    description: '建筑物脉冲发光效果',
    glslCode: `void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  // 基于时间的脉冲效果
  float pulse = sin(czm_frameNumber * 0.1) * 0.5 + 0.5;
  
  // 基础颜色
  vec3 baseColor = vec3(0.0, 0.5, 1.0);  // 蓝色
  
  // 添加脉冲效果
  material.diffuse = baseColor + vec3(pulse * 0.5);
  material.emissive = baseColor * pulse * 0.3;  // 自发光
}`,
    jsCode: `const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  fragmentShaderText: \`
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
      float pulse = sin(czm_frameNumber * 0.1) * 0.5 + 0.5;
      vec3 baseColor = vec3(0.0, 0.5, 1.0);
      material.diffuse = baseColor + vec3(pulse * 0.5);
      material.emissive = baseColor * pulse * 0.3;
    }
  \`
});
tileset.customShader = customShader;`
  }
])

// 当前选中的示例
const currentExample = computed(() => {
  return examples.value.find(ex => ex.id === selectedExample.value)
})

// 选择示例
const selectExample = (id) => {
  selectedExample.value = id
}

// 更新参数（如果需要的话）
const updateParameter = (name, value) => {
  console.log(`更新参数 ${name}: ${value}`)
}
</script>

<style scoped>
.glsl-examples {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.example-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.example-selector button {
  padding: 10px 15px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s;
}

.example-selector button:hover {
  background: #f0f0f0;
}

.example-selector button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.example-content {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.description {
  color: #666;
  margin-bottom: 20px;
  font-style: italic;
}

.code-section {
  margin-bottom: 20px;
}

.code-section h4 {
  color: #333;
  margin-bottom: 10px;
}

.code-section pre {
  background: #2d3748;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.parameters {
  background: white;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.param-item {
  margin-bottom: 15px;
}

.param-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.param-item input[type="range"] {
  width: 100%;
  margin-top: 5px;
}

h2 {
  color: #333;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

h3 {
  color: #007bff;
  margin-bottom: 10px;
}
</style>
